<template>
	<view>
		<view class="">
			<!-- <img src="/static/image/school.jpg" class="image" alt=""> -->
			<view class="bg-img padding-bottom-xl"
				style="background-image: url('/static/image/school.jpg');height: 300rpx;">
				<view class="bg-shadeTop padding padding-bottom-xl text-blue">
					教务系统导入课表
				</view>
			</view>
			<view class="">
				<view class="cu-form-group margin-top">
					<view class="title">学号：</view>
					<input class="uni-input" v-model="username" placeholder="请输入学号" maxlength="11" type="number"
						@blur="blurHandle('s')"></input>
					<!-- <text class="text-gray cuIcon-question"></text> -->
				</view>
				<view class="cu-form-group">
					<view class="title">密码：</view>
					<input placeholder="请输入密码" v-model="password" @blur="blurHandle('p')"
						:type="[passwordIcon == 'cuIcon-attentionforbid' ? 'password' : 'text']"></input>
					<text class="text-gray" :class="passwordIcon" @click="passwordcontrol"></text>
				</view>
				<view class="padding flex flex-direction">
					<button class="cu-btn bg-blue lg" @click="fetchData">拉取</button>
				</view>
				<!-- <view class="">
					<view class="choose">√</view>
					<text class="cuIcon-check choose padding"></text>
				</view> -->
			</view>
		</view>

		<view class="cu-modal" :class="modalName=='Modal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">提示信息</view>
					<view class="action" @click="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					{{resultMsg}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				passwordIcon: 'cuIcon-attentionforbid',
				username: null,
				password: null,
				modalName: null,
				resultMsg: '',
				timer: null,
			};
		},
		methods: {
			passwordcontrol() {
				if (this.passwordIcon == 'cuIcon-attentionforbid') {
					this.passwordIcon = 'cuIcon-attention'
				} else {
					this.passwordIcon = 'cuIcon-attentionforbid'
				}
			},
			blurHandle(res) {
				console.log(typeof(Number(res)));
			},
			async fetchData() {
				if (this.username.length !== 11) {
					this.suggestFun('请检查学号是否正确', false)
					return false
				}
				const {
					data: res
				} = await uni.$http.get('/timeable/getTimetableByAutomatic', {
					userId: '256',
					password: this.password,
					username: this.username
				})
				console.log(res, true);
				if (res.code !== 200) {
					this.suggestFun(res.message)
				}
			},
			suggestFun(msg, judje) {
				this.modalName = 'Modal'
				this.resultMsg = msg
				judje ? this.username = null : ''

				judje ? this.password = null : ''
				clearTimeout(this.timer)

				this.timer = setTimeout(() => {
					this.modalName = null
				}, 2000)
			},
			hideModal() {
				this.modalName = null
			},
		}
	}
</script>

<style lang="scss" scoped>
	.image {
		// max-height: ;
		height: 350rpx;
		width: 100%;
	}

	.checkbox {
		border-radius: 50%;
		overflow: hidden;

		&::after {
			color: blue;
		}
	}

	.choose {
		border-radius: 50%;
		width: 30rpx;
		height: 30rpx;
		border: 2px soild red;
	}
</style>
